<template>

   <table class="table">
        <tr>
            <th class="h1">音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
        </tr>
        <tr v-for="(item, index) in list" :key="index" @click='btnClick(item.id)'>
            <td class="item-td">
                <span class="span">{{index+1}}</span>
                <img class="iconImg" :src="item.picUrl" alt="">
                <span>{{item.name}}</span>
            </td>
            <td>{{item.song.artists|filterName}}</td>
            <td>{{item.song.album.name}}</td>
            <td>{{item.song.duration|Time}}</td>
        </tr>
    </table>
</template>

<script>
import moment from 'moment'
export default {
     filters:{
            // 过滤器过滤 歌手名
            filterName(arr){
                return arr.map(item2=>{
                    return item2.name
                }).join(' & ')
            },

            //过滤器转换时间戳
            Time(num){
                return moment(num).format('mm:ss')
            }
        },
    data() {
      return {
        list:[],
        type:'mp3'
      }
    },
    created() {

    },
    methods: {
    btnClick(id){
        if(this.type=='mp3'){

            this.$router.push('/audioPlay?id='+id)
        }else{
             this.$router.push('/mvPlay?id='+id)
        }
    }      
    },
}
</script>

<style>
     .table{
        width: 100%;
    }
    .iconImg{
        width: 60px;
        margin-right: 20px;
    }
    .item-td{
        display: flex;
        align-items: center;
    }
    .span{
        width: 50px;
    }
    .table tr{
        text-align: left;
    }
    .h1 {
        padding-left: 140px;
    }
</style>